<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@ include file="../header.jsp"%>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>确认订单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="${path}/resources-front/css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="${path}/resources-front/css/common.css" rel="stylesheet"/>
    <link href="${path}/resources-front/css/cart.css" rel="stylesheet"/>
</head>
<body class="graybg-theme">
    <!--头部-->
        <div class="topper">
            <div class="wrapper">
                <div class="left-bar">
                    <div class="back-home divider">
                        <em></em><a href="index.html">商城首页</a>
                    </div>
                    <div class="item"><a href="">商家中心</a></div>
                </div>
                <div class="right-bar">
                    <div class="login-user sub-menu">
                        <a class="menu-hd" href="">txtangxia<em></em></a>
                        <div class="down">
                            <a href="">内容</a>
                            <a href="">内容</a>
                            <a href="">内容</a>
                        </div>
                    </div>
                    <div class="item"><a href="">消息（<span class="txt-theme">0</span>）</a></div>
                    <div class="logout divider"><a href="">退出</a></div>
                    <span class=""></span>
                    <div class="cart"><em></em><a href="">购物车<span class="txt-theme">2</span>件</a></div>
                    <div class="order"><em></em><a href="">我的订单</a></div>
                    <div class="fav"><em></em><a href="">我的收藏</a></div>
                    <div class="help"><em></em><a href="">帮助中心</a></div>
                </div>
            </div>
        </div>
        <div class="cart-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="${path}/resources-front/img/logo.png" alt="logo" /></a>
            </div>
            <div class="step-box">
                <div class="row">
                    <div class="step first active col-3">
                        <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
                    </div>
                    <div class="step active col-3">
                        <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
                    </div>
                    <div class="step col-3">
                        <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
                    </div>
                    <div class="step last col-3">
                        <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
                    </div>
                </div>
            </div>
        </div>
    <!--头部-->

    <div class="wrapper confirm-wrap">
        <div class="confirm-tit">
            <span class="tit">选择收货地址 :</span>
        </div>
        <div class="confirm-address clearfix">
            <c:forEach items="${shippinglist}" var="shipping">
                <div class="col col-4">
                    <div class="item" onclick="divStatus(${shipping.id})" id="${shipping.id}" ><%--active--%>
                        <div class="action">
                            <a class="edit" href="javascript:;">修改</a>
                        </div>
                        <div class="info">
                            <div class="ellipsis"><img src="${path}/resources-front/img/ico/user.jpg" alt="" />${shipping.receiverProvince}${shipping.receiverCity}（${shipping.receiverName} 收）</div>
                            <div class="ellipsis"><img src="${path}/resources-front/img/ico/dizhi.jpg" alt="" />${shipping.receiverProvince}${shipping.receiverCity}${shipping.receiverDistrict}${shipping.receiverAddress}</div>
                            <div class="ellipsis"><img src="${path}/resources-front/img/ico/tel.jpg" alt="" />${shipping.receiverPhone} / ${shipping.receiverMobile}</div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <div class="confirm-address-bar"  style="display: none;">
            <a href="javascript:;" class="drop" data-action="drop">显示全部地址</a>
        </div>

        <div class="confirm-tit">
            <span class="tit">发票 :</span>
        </div>
        <div class="control-group">
            <div class="hd">
                发票抬头：
            </div>
            <div class="bd">
                <select class="ui-txtin" name="" id=""><option value="">个人</option></select>
                <input class="ui-txtin" style="width: 300px;"  type="text" name=""/>
            </div>
        </div>
        <div class="confirm-tit">
           <span class="tit">确认商品信息:</span><div class="right"><a class="back" href="">返回购物车></a></div>
        </div>
        <c:forEach items="${cartVOList}" var="cartVO">
            <div class="confirm-goods">
                <div class="confirm-goods-bd">
                    <div class="goods clearfix">
                        <div class="col col1">
                            <img src="http://qht8fjumq.hb-bkt.clouddn.com/${cartVO.productImage}" alt="">
                            <div class="info">
                                <div class="name">${cartVO.productName}</div>
                            </div>
                        </div>
                        <div class="col col2">￥<span>${cartVO.productPrice}</span></div>
                        <div class="col col3">${cartVO.quantity}</div>
                        <div class="col col4">￥<span class="thisPrice">${cartVO.productPrice * cartVO.quantity}</span></div>
                    </div>
                </div>
            </div>
        </c:forEach>
         <div class="confirm-total">
            <div class="box">
                <div class="item">应付总额：<strong id="totalPrice"></strong></div>
                <a class="ui-btn-theme go-charge" href="javascript:getPayPage()">去结算</a>
            </div>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
    <div id="addressform" style="display:none" class="layer-address">
        <form action="">
            <div class="control-group">
                <div class="hd">
                    收货人姓名：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="">
                </div>
            </div>
            <div class="control-group">
                <div class="hd">
                    联系电话：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="">
                </div>
                <div class="hd">或固定电话：</div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="">
                </div>
            </div>
            <div class="control-group">
                <div class="hd vat">
                    所在地区：
                </div>
                <div class="bd">
                    <select class="ui-txtin ui-txtin-thin" style="width: 180px;" name="">
                        <option value="">选择省</option>
                    </select>
                    <div class="mt10">
                        <input class="ui-txtin ui-txtin-thin" style="width: 560px;" type="text" name="" placeholder="请填写具体地址，不需要重复填写省/市/区">
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="hd vat">
                    邮政编码：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="">
                </div>
            </div>
            <div class="control-bottom clearfix">
                <a href="" class="fl btn ui-btn-theme">保存</a><a href="" class="fr btn ui-btn cancle">取消</a>
            </div>
        </form>
    </div>
</body>
<script src="${path}/resources-front/js/jquery.js"></script>
<link rel="stylesheet" href="${path}/resources-front/js/icheck/style.css"/>
<script src="${path}/resources-front/js/icheck/icheck.min.js"></script>
<script src="${path}/resources-front/js/layer/layer.js"></script>
<script src="${path}/resources-front/js/global.js"></script>
<script>
//这里不使用自带按钮，因为设计按钮较特殊，不准备作为通用样式
$('.confirm-address .edit,.confirm-address .add').on('click',function () {
    layer.open({
        type: 1,
        skin: 'layui-layer-seaing',
        title: '标题',
        area: ['720px', 'auto'],
        content: $('#addressform')
        //btn: ['按钮一', '按钮二']
    });
});
$(document.body).on('click','.layer-address .cancle',function () {
    layer.closeAll();
    return false;
})

//
function juggeAddressNum () {
    var col=$('.confirm-address .col'),
    cH=col.height();
    $('.confirm-address').height(cH)
    if (col.length>3) {
        $('.confirm-address-bar').show();
    }
    else {
        $('.confirm-address-bar').hide();
    }
}
juggeAddressNum();
zAction.add({
    'drop':function () {
        $('.confirm-address').height('auto')
        var h=$('.confirm-address').height()
        juggeAddressNum();
        $('.confirm-address').animate({height: h}, 300);
        $(this).parent().remove();
    }
});
</script>
<script>
    $(function (){
        var priceSpanArray = $('.thisPrice');
        var totalPrice = 0;
        $(priceSpanArray).each(function (){
            var thisPrice = $(this).text();
            totalPrice += parseFloat(thisPrice);
        });
        $('#totalPrice').text('￥' + totalPrice);
    });
    function divStatus(shippingId) {
        var thisDiv = $('#' + shippingId).attr('class');
        if (thisDiv == 'item') {
            $('.active.item').removeClass('active');
            $('#' + shippingId).addClass('active');
        } else {
            $('#' + shippingId).removeClass('active');
        }
        console.log($('#' + shippingId).attr('id'));
    }
    function getPayPage() {
        var shippingId = $('.item.active').attr('id');
        $.post(
            '${path}/order/insert.shtml',
            {'shippingId' : shippingId},
            function(jsonResult) {
                console.log(jsonResult);
                if (jsonResult.code == 0) {
                    console.log(jsonResult);
                    console.log(jsonResult.data);
                    mylayer.successUrl(jsonResult.msg, '${path}/order/getPayPage.shtml?orderNo=' + jsonResult.data);
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            },
            'json'
        );
    }
</script>
</html>